<nz-spin [nzSpinning]="isSpinning">
  <section class="article_container">
    <!--图形区域-->
    <div class="graphic_container">
      <div class="graphic_btn-container">
        <button nz-button nzType="primary" [routerLink]="['/article-management/edit-article']"
                [queryParams]="{id:0,reload:true}"><i class="anticon anticon-plus"></i>新增文章
        </button>
        <button nz-button nzType="primary" (click)="getData();isSpinning = true;"><i class="anticon anticon-reload"></i>刷新
        </button>
      </div>
      <nz-table #articleTable [nzData]="ariticeData">
        <thead>
        <tr>
          <th>标题</th>
          <!--<th>图片</th>-->
          <th>文章简介</th>
          <th class="article_date">创建日期</th>
          <th class="article_operating">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of articleTable.data">
          <td>{{data.title}}</td>
          <!--<td class="article_img"><img src="{{data.img}}" alt=""></td>-->
          <td class="article_introduction">{{data.details}}</td>
          <td class="article_date">{{data.date | date:'yyyy-MM-dd HH:mm:ss'}}</td>
          <td class="article_operating">
            <a target="_blank" href="/boko/about/artile-details?id={{data.id}}">预览</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a [routerLink]="['/article-management/edit-article']" [queryParams]="{id:data.id,reload:true}">修改</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a (click)="delectArticleFunc(data.id)">删除</a>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </section>
</nz-spin>

